<template>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-info">
                <Image class="profile-info-avatar" round fit="cover" :src="akUser.avatarImage"></Image>
                <span class="profile-info-nickname">{{akUser.nickName}}</span>
                <span class="profile-info-address">
                    <Icon name="manager-o" /> ID:{{akUser.pin}}
                </span>
            </div>
        </div>
<!--        <Grid :column-num="4" clickable>
            <GridItem icon="balance-list-o" text="全部订单"></GridItem>
            <GridItem icon="paid" text="待付款" badge="3"></GridItem>
            <GridItem icon="sign" text="待收货"></GridItem>
            <GridItem icon="vip-card-o" text="我的VIP卡" dot></GridItem>
        </Grid>-->
<!--        <CellGroup class="action-group">
            <Cell icon="cart-o" title="我的购物车" is-link />
            <Cell icon="like-o" title="我的收藏" is-link />
            <Cell icon="clock-o" title="我的历史记录" is-link />
        </CellGroup>-->

      <CellGroup class="action-group">
        <Field name="rate" label="交易信用">
          <template #input>
            <Rate v-model="akUser.credit" icon="like" void-icon="like-o" readonly />
          </template>
        </Field>
        <Field name="rate" label="账户星级">
          <template #input>
            <Rate v-model="akUser.investmentLevel.StarNumber"  void-icon="star" color="#401EBF" readonly />
          </template>
        </Field>

      </CellGroup>
        <CellGroup class="action-group">
            <Cell icon="envelop-o" title="意见反馈" is-link />
            <Cell icon="info-o" title="关于版本" @click="showVersionDialog" />
        </CellGroup>
        <CellGroup class="action-group">
<!--            <Cell icon="good-job-o" title="在Github点赞" is-link
                url="https://github.com/Coder-XiaoYi/vue-mobile-template" />-->
            <Cell icon="good-job-o" title="在Gitee点赞" is-link url="https://gitee.com/zh-gitt/vue3-vant-wilddonkey" />
        </CellGroup>
      <br/>
      <CellGroup >
        <Cell is-link clickable title="退出登录" title-style="color:red;" @click="onLogout"></Cell>
      </CellGroup>


    </div>
</template>
<script setup name="Profile">
import { Image, Icon, Grid, GridItem, CellGroup, Cell, Button,Dialog, Rate,Field} from 'vant';
import {onMounted, reactive} from "vue";
import {getToken, removeToken} from "@/utils/auth";
import {doGet} from "@/utils/request";
import {messageTip} from "@/utils/messageTip";
import router from "@/router";
let akUser = reactive({
  pin:"",
  investmentLevel: {
    StarNumber: 0,
  },
  avatarImage: "",
  credit: 0,
  createTime: "",
  memberNo: "",
  nickName: ""
});
function getUserInfo(){
  let o = getToken().akUser
  akUser.pin = o.pin
  akUser.investmentLevel.StarNumber = o.investmentLevel.StarNumber
  akUser.avatarImage = o.avatarImage
  akUser.credit = o.credit
  akUser.memberNo = o.memberNo
  akUser.nickName = o.nickName
}

function showVersionDialog(){
  Dialog.alert({
    message: "release version 1.0.3"
  }).then(() => {
    // on close
  });
}
onMounted(()=>{
  getUserInfo()
})
/**
 * 退出时关闭后台任务
 */
function onLogout() {
  Dialog.confirm({
        message: '确认退出吗？将停止账号：'+ akUser.memberNo + "进行的所有任务！"
      }
  ).then(() => {
    doGet("/cancelTask", {"taskId": akUser.memberNo}).then(req =>{
      if (req.data.code == 200){
        messageTip("已经成功关闭抢单！已退出！", "success")
      }else {
        messageTip("此账号任务不存在！已退出！", "success")
      }
    })
   // removeToken();
    router.push("/login")
  })
  .catch(() => {
    messageTip("已取消", "success")
  })
}
</script>
<style lang="scss" scoped>
.profile-container {

    .action-group {
        margin-top: 10px;
    }

    .profile-header {
        &::before {
            content: '';
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

        width: 375px;
        height: 220px;
        background-image: url("@/../public/profile2/background.png");
        background-size: cover;

        display:flex;
        justify-content: center;
        align-items: center;

        .profile-info {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: #f0f0f0;

            &-avatar {
                border: 3px solid #f0f0f0;
                width: 80px;
                height: 80px;
            }

            &-nickname {
                font-size: 20px;
                margin: 7px;
            }

            &-address {
                font-size: 14px;
                margin: 5px 5px 0px 5px;
            }
        }


    }
}
</style>